<template>
  <div class="home" ref="home">
    <div class="createArticle" @click="createArticle"></div>
    <div id="div"></div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, ref, onMounted, toRefs } from "vue";
import { getRandomInt } from "@/utils/index";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
// import E from "wangeditor";

export default defineComponent({
  name: "123",
  setup() {
    const store = useStore();
    const router = useRouter();
    const data = reactive({
      imgList: [
        // "https://i.loli.net/2021/06/04/8ChdSApQV2tJ4z3.jpg",
        // "https://i.loli.net/2021/06/04/bue76RaLHKyVhXn.jpg",
        // "https://i.loli.net/2021/06/04/yjIp3kMAvG9ihLl.jpg",
        // "https://i.loli.net/2021/06/04/XaZlpjKY3GqyV9U.jpg",
        // "https://i.loli.net/2021/06/04/2qDPVu4tsxabehH.jpg",
        // "https://i.loli.net/2021/06/04/j6rNcGMWQzVvFPn.jpg",
        // "https://i.loli.net/2021/06/04/uVxZCYhaHU153Pj.jpg",
        "http://localhost/static/01.png",
        "http://localhost/static/02.jpg",
        "http://localhost/static/03.jpg",
        "http://localhost/static/04.jpg",
        "http://localhost/static/05.jpg",
        "http://localhost/static/06.jpg",
        "http://localhost/static/07.jpg",
        "http://localhost/static/08.jpg",
        "http://localhost/static/09.jpg",
        "http://localhost/static/10.jpg",
      ] as Array<string>,
    });
    const home = ref<any>(null);

    function changeBackgroundImg(): void {
      const index: number = getRandomInt(0, data.imgList.length);
      const url: string = data.imgList[index];
      home.value.style.backgroundImage = "url(" + url + ")";
    }

    function createArticle() {
      store.commit("createArticle");
      router.push({ name: "Edit" });
    }

    onMounted(() => {
      changeBackgroundImg();
      // const editor = new E("#div");
      // 或者 const editor = new E( document.getElementById('div1') )
      // editor.create();
    });

    return {
      ...toRefs(data),
      home,
      changeBackgroundImg,
      createArticle,
    };
  },
});
</script>
<style lang="scss" scoped>
.home {
  overflow: hidden;
  width: 100%;
  height: 100%;
  background-size: 100%;
  .createArticle {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 100px;
    background-color: rgb(75, 75, 75);
    box-shadow: 0 0 10px 3px rgba(134, 134, 134, 0.842);
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.1s ease;
    &:hover {
      opacity: 0.5;
      cursor: pointer;
    }
    &:active {
      background-color: rgb(19, 19, 19);
    }
    &::after {
      content: "new";
      display: block;
      position: relative;
      top: 36px;
      left: 30px;
      color: rgba(255, 255, 255, 0.842);
      font-size: 20px;
    }
  }
}
</style>
